export class OptimizedImage {
  private img: HTMLImageElement;
  private placeholder: HTMLDivElement;
  private container: HTMLDivElement;

  constructor(
    src: string,
    alt: string,
    width: number = 200,
    height: number = 200,
    className: string = ''
  ) {
    this.container = document.createElement('div');
    this.container.className = `optimized-image-container ${className}`;
    this.container.style.cssText = `
      position: relative;
      width: ${width}px;
      height: ${height}px;
      background: #f0f0f0;
      border-radius: 8px;
      overflow: hidden;
    `;

    // 创建占位符
    this.placeholder = document.createElement('div');
    this.placeholder.className = 'image-placeholder';
    this.placeholder.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 14px;
    `;
    this.placeholder.textContent = '加载中...';

    // 创建图片元素
    this.img = document.createElement('img');
    this.img.alt = alt;
    this.img.style.cssText = `
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;

    // 添加懒加载
    this.setupLazyLoading(src);

    // 添加样式
    this.addStyles();

    this.container.appendChild(this.placeholder);
    this.container.appendChild(this.img);
  }

  private setupLazyLoading(src: string): void {
    // 使用 Intersection Observer 实现懒加载
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            this.loadImage(src);
            observer.unobserve(this.container);
          }
        });
      }, {
        rootMargin: '50px'
      });
      observer.observe(this.container);
    } else {
      // 降级处理：直接加载
      this.loadImage(src);
    }
  }

  private loadImage(src: string): void {
    this.img.onload = () => {
      this.img.style.opacity = '1';
      this.placeholder.style.display = 'none';
    };

    this.img.onerror = () => {
      // 加载失败时显示默认图片
      this.img.src = this.generatePlaceholderImage();
      this.img.style.opacity = '1';
      this.placeholder.style.display = 'none';
    };

    this.img.src = src;
  }

  private generatePlaceholderImage(): string {
    // 生成SVG占位符图片
    const width = this.img.style.width || '200';
    const height = this.img.style.height || '200';
    const text = this.img.alt || '图片';
    
    return `data:image/svg+xml;base64,${btoa(`
      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="#f0f0f0"/>
        <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="14" 
              fill="#999" text-anchor="middle" dy=".3em">${text}</text>
      </svg>
    `)}`;
  }

  private addStyles(): void {
    if (!document.getElementById('optimized-image-styles')) {
      const style = document.createElement('style');
      style.id = 'optimized-image-styles';
      style.textContent = `
        @keyframes loading {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }
        
        .optimized-image-container {
          transition: transform 0.2s ease;
        }
        
        .optimized-image-container:hover {
          transform: scale(1.02);
        }
      `;
      document.head.appendChild(style);
    }
  }

  public render(): HTMLElement {
    return this.container;
  }
} 